<template>
  <!-- 主容器，动态绑定样式-动态设置高度为innerHeight像素 -->
  <div class="container" :style="{height:innerHeight+'px'}">
    <!-- 头部 -->
    <div class="header">
      <div class="header-panel panel-between item-center">
        <!-- 左侧 -->
        <div class="panel-start item-center w-250">
          <div class="logo">
            <img src="../../assets/logo.png" width="30" alt>
          </div>
          <div class="ma-l30 bold fo-b">{{systemName}}</div>
        </div>
        <!-- 中间 -->
        <div class="w-800 panel-center">
          <!-- 中间部分 -->
            <!-- 条件渲染，仅当用户类型为管理员(dtype=1)时显示 -->
            <!-- 应用Element UI默认菜单样式 -->
            <!-- 设置为水平导航模式 -->
            <!-- 当前激活菜单项，绑定到defaultMeun变量 -->
            <!-- 菜单项选中事件，触发selectTopNav方法 -->
          <el-menu
            v-if="dtype == 1" 
            class="el-menu-demo"  
            mode="horizontal" 
            :default-active="defaultMeun"
            @select="selectTopNav"
          >
            <!-- 遍历topNav数组生成菜单项 -->
            <!-- 使用index作为key(建议改用item.id等唯一值) -->
            <!-- 菜单项唯一标识，通常对应路由路径 -->
            <!-- 显示菜单文本 -->
            <el-menu-item
              v-for="(item,index) in topNav"
              :key="index"
              :index="item.path"
            >{{item.label}}</el-menu-item>
          </el-menu>
        </div>
        <!-- 右侧 -->
        <div class="w-250 text-right">
          <el-dropdown trigger="click">
            <el-button type="text" class="el-dropdown-link">
              {{dtype==1 ? '管理员':dtype==2?'代理':'用户'}} {{username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div class="dropdown-item" @click="navTo('/user/info')">我的信息</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="dropdown-item" @click="navTo('/user/emer')">重要通知设置</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="dropdown-item" @click="navTo('/updatepwd')">修改密码</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="dropdown-item fo-danger" @click="logout()">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main">
      <div class="main-panel panel-center">
        <!-- 左侧菜单 -->
        <div class="main-left">
          <!-- 
            Menu组件 - 左侧导航菜单容器
            :active-name - 绑定当前激活菜单项的路由路径
            @on-select - 菜单项选择事件处理方法
            style - 固定宽度180px
          -->
          <Menu :active-name="defaultActive" style="width:180px" @on-select="navSelect">
            <!-- 
              MenuGroup - 菜单分组组件
              v-for - 遍历nav数组生成菜单组
              :key - 使用index作为唯一key
              :title - 菜单组标题
            -->
            <MenuGroup v-for="(item,index) in nav" :key="index" :title="item.label">
              <!-- 
                MenuItem - 具体菜单项
                v-for - 遍历item.sub数组生成子菜单项
                :key - 使用index2作为唯一key
                :name - 绑定菜单项的路由路径
              -->
              <MenuItem v-for="(item2,index2) in item.sub" :key="index2" :name="item2.path">
                <!-- Icon - 菜单项图标组件 -->
                <Icon :type="item2.icon"/>
                <!-- 菜单项文本 -->
                {{item2.label}}
              </MenuItem>
            </MenuGroup>
          </Menu>
        </div>
        <!-- 右侧内容 -->
        <div class="main-right">
          <div class="main-right-top panel-between">
            <!-- 上 -->
            <div>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="fo-g">{{linkName}}</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
              <div class="fo-36 ma-t10">{{linkName}}</div>
            </div>
            <!-- 下 -->
            <div>
              <div>
                <el-input placeholder="输入页面名称" v-model="inputValue" @keyup.enter.native="handleJump">
                  <el-button slot="append" @click="handleJump">跳转</el-button>
                </el-input>
              </div>
            </div>
          </div>
          <!-- 右侧内容区域 -->
          <div class="main-right-panel">
            <router-view></router-view>
          </div>

        </div>
      </div>
    </div>
    
    <!-- 底部 -->
    <div class="footer">校园综合服务平台开源版本 2023</div>
  </div>
</template>
<script>
export default require("./index.js");
</script>
